<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>题库</title>
<link rel="stylesheet" type="text/css" href="<%=path %>/style/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/style/icon.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/style/neweasyui/themes/gray/panel.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/style/neweasyui/themes/gray/window.css">
<script type="text/javascript" src="<%=path %>/script/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=path %>/script/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path %>/script/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path %>/script/dateFormat.js"></script>
<script type="text/javascript" src="<%=path %>/script/datagrid-bufferview.js"></script>
<script type="text/javascript" src="<%=path %>/script/common.js"></script>

<style type="text/css">
        #fm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:17px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
        }
        .fitem input{
            width:230px;
        }
</style>
</head>
<body>
<table id="tt" title="题库" style="width:auto;height:800px">
	</table>
	
	<div id="toolbar" style="padding:5px;height:auto">
        <div>
         
         <!-- 搜索条件开始 -->	
		    ID：<input id="sid"  name="id" type="text" class="easyui-textbox" style="width:80px">&nbsp;&nbsp;
		            题号：<input id="sqnum"  name="qnum" type="text" class="easyui-textbox" style="width:80px">&nbsp;&nbsp;
		            题目：<input id="scontent"  name="content" type="text" class="easyui-textbox" style="width:200px">&nbsp;&nbsp;
		            标签：<input id="stagText"  name="tagText" type="text" class="easyui-textbox" style="width:100px">&nbsp;&nbsp;
         <!-- 搜索条件结束 -->	
            <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-search" onclick="searchData()">查询</a>&nbsp;&nbsp;
            <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-edit" onclick="editQbank()">修改</a>&nbsp;&nbsp;
            <!-- 
            <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-remove" onclick="deleteQbank()">删除</a>&nbsp;&nbsp;
            <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-search" onclick="checkSource()">查看资源文件</a>&nbsp;&nbsp;
            <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-search" onclick="checkViews()">查看观点</a>&nbsp;&nbsp;
             -->
        </div>
    </div>
     
    
    <!-- 添加/编辑框 开始-->
	 <!-- 添加/编辑框 开始-->
	<div id="dlg" class="easyui-dialog"
		style="width: 800px; height: 650px; padding: 10px 20px" closed="true"
		buttons="#dlg-buttons">
		<div class="ftitle">黄金口语</div>
		<form id="fm" method="post"  validate>
			<div class="fitem" style="border:dotted 1px;width: 563px;">
				<div style="margin-top:10px;">
				     <div style="float: left;width: 80px;">选题:</div> 
				     <div  style="float: left;">
				       <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-add" onclick="selQuestion('questionDiv','')">新增</a>
				     </div> 
				</div>
				<br/><br/>
				<div id="questionDiv">
				    
				</div>
			</div>
			
			<!-- 选题情况总结 -->
			<div class="fitem" id="sammarDiv" style="border:dotted 1px;width: 563px;display:none;">
				<div style="margin-top: 19px;margin-left: 82px;margin-bottom: 10px;" id="sammar">
				     
				</div>
			</div>
			<!-- 选题情况总结结束 -->
			
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="javascript:void(0)" class="easyui-linkbutton c6"
			iconCls="icon-ok" onclick="updateAll()" style="width: 90px">Save</a> <a
			href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-cancel" onclick="closeDialog()"
			style="width: 90px">Cancel</a>
	</div>
	 <!-- 添加/编辑框结束-->
	 
</body>
<script type="text/javascript">
$.ajaxSetup({cache:false});
$(function(){
	$('#tt').datagrid({
		url:'<%=basePath %>test/classic/list',
		method:'get',
		singleSelect:true,toolbar:'#toolbar',remoteSort:false,pageSize:50,nowrap:false,
		pagination:true,fitColumns:true,
	    columns:[[
	        {field:'id',title:'ID',sortable:true,width:50},
	        {field:'questionNum',title:'题号',sortable:true,width:80},
	        {field:'content',title:'题目',sortable:true,width:400},
	        {field:'tags',title:'标签',sortable:true,width:100,
	        	formatter: function(value,row,index){
	        		var str="" ;
	        		for(var i in row.tags){
	        			str = str+row.tags[i].tagText+"/";
	        		}
	        		return str;
	        	} 
	        },
	        {field:'createTime',title:'创建时间',sortable:true,width:100,formatter:Common.DateFormatterTime,sorter:Common.DateSorter } ,
	        {field:'updateTime',title:'最后更新时间',sortable:true,width:100,formatter:Common.DateFormatterTime,sorter:Common.DateSorter } 
	    ]]
	});
	
});

	function searchData(){
		var id = $("#sid").textbox('getValue') ;
		var qnum = $("#sqnum").textbox('getValue');
		var content = $("#scontent").textbox("getValue");
		var tagText = $("#stagText").textbox("getValue") ;
		$('#tt').datagrid({
			url:'<%=basePath %>test/classic/list?page=1&qnum='+qnum+'&content='+content+'&tagText='+tagText+'&id='+id,
			method:'get',
			onLoadSuccess:function(data){
				if(data.total==0){
					$.messager.alert('提示','没有查询到任何符合条件的数据');
				}
			}
		});
	}
	
	
	 
	
	//-------------------------------------------------
	//关闭弹出框
	function closeDialog(){
		 $('#dlg').dialog('close') ;
	}
	

	
	//-------------------------------------------------

	//选择题库
	function selQuestion(divId,qnum){
	   qindex++ ;
	   var _div = $('<div style="margin-top: 19px;margin-left: 82px;margin-bottom: 10px;">'+
				  '      <span name="qindex">'+qindex+'</span>. '+
				  '      <span>'+
				      '    题号:<input type="text" name="qnum" style="width:86px;" value="'+qnum+'" onkeyup="checkQnumIsExist(this.value,this)" /> - '+
				    '    </span>'+
				    '    &nbsp;<a href="#" onclick="delQ(this)">删除</a>'+
				    '</div>');
	       $("#"+divId).prepend(_div) ;
	      
	       $(_div).find("select option").each(function(){
	    	   if(qstar==$(this).attr('value')){
	    		   $(this).attr('selected','selected') ;
	    	   }
	       });
	}
	//编辑题库
	var qindex = 0 ,onestarcount=0,twostarcount=0,thirdstarcount=0,fourstarcount=0,fivestarcount=0 ;
	function editQbank(){
		 qindex = 0 ;
		$('#questionDiv').empty();
		 $('#dlg').dialog('open').dialog('setTitle','编辑题库');
		 $.ajax({
            type: "get",//使用get方法访问后台
            dataType: "json",//返回json格式的数据
            url: "<%=basePath%>test/classic/listAll",//要访问的后台地址
             beforeSend: function () {
                   $.messager.progress({
	                title:'请稍等',
	                msg:'正在获取...',
	                text:'拼命获取中',
	                interval:500
	            });                
           },
            complete :function(){
            	$.messager.progress('close');
            },//AJAX请求完成时隐藏loading提示
            success: function(msg){//msg为返回的数据，在这里做数据绑定
                var data = msg.content;
                $.each(data, function(i, n){
                     selQuestion('questionDiv',n.questionNum) ;
                });
		
			 }
			  });
			 
			
			 url = '<%=basePath%>test/classic/updateAll';
	}
	var flag = true;
	//添加或修改题库
	function updateAll(){
		
	   $('#fm').form('submit', {
			url : url,
			onSubmit : function() {
			$.messager.progress({
	                title:'请稍等',
	                msg:'正在更新...',
	                text:'拼命更新中',
	                interval:500
	            });
	            if(!$(this).form('validate') && flag){
	            $.messager.progress('close');
	            }
	            
				return $(this).form('validate') && flag;
			},
			success : function(result) {
				 $.messager.progress('close');
				if (result==0) {
					$.messager.show({
						title : 'Error',
						msg : '服务器出错，请稍后再试'
					});
				} else {
					$('#dlg').dialog('close'); // close the dialog
					$('#tt').datagrid('reload'); // reload the user data
				}
			}
		});
	}
	

	
	function checkQnumIsExist(qnum,obj){
		 
		if(qnum.length>0){
			$.ajax({
				type: 'get'  ,
				url : '<%=basePath%>test/experience/checkQnumIsExist' ,
				data: 'qnum='+qnum ,
				success:function(rs){
					if(rs==1){
						$(obj).removeClass('validatebox-invalid') ;
					}else{
						$(obj).addClass('validatebox-invalid') ;
					}
				}
			});
		}
		
	}
	//删除题
	function delQ(obj){
		
		//当前删除的题的索引
		//var currqindex = parseInt($(obj).parent().find("span[name='qindex']").html()) ;
		//var qstar =  parseInt($(obj).parent().find("select").val()) ;
		//此索引之后的索引依次减1
		$(obj).parent().remove();
		var items = $("span[name='qindex']");
		var size =items.length;
		qindex = size ;
		$(items).each(function(){
			$(this).html(size);
			size--;
		});
		
		 
		//统计更新
		//dealstar(qstar,false) ;
	}
	 
	 
</script>
</html>